<template>
	<view>
		<!-- 筛选view -->
		<view class="filterView">
			<materialFilterView :curMaterial="curMaterial" @changeMaterialType="changeMaterialType"
				@changePort="changePort" @toPortSelect="toPortSelect" @closePortPopup="closePortPopup">
			</materialFilterView>
		</view>
 
		<!-- 列表 -->
		<view class="portMaterialList">
			<view v-for="(item,index) in portMaterialList">
				<materialCell :item="item" @itemClick="itemClick"></materialCell>
			</view>
		</view>
		<u-loadmore :status="portMaterialStatus" :icon-type="loadType" :load-text="loadText" />
		
		<!-- 详情弹框 -->
		<u-popup class="popup" v-model="popupShow" mode="center" border-radius="20" width="580rpx">
			<view class="popup-topView">
				<view class="popup-score">{{selectedItem ? selectedItem.score : 0}}</view>
				<view class="popup-title">{{selectedItem ? selectedItem.materialName+'详情' : '详情'}}</view>
				<!-- <u-icon class="popup-collect" name="star-fill" color="#FEAE33" size="34" @click="collect"></u-icon> -->
			</view>
			<table class="popup-table" cellSpacing="0">
				<tr>
					<td class="popup-table-th">物料名称</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.materialName : ''}}</td>
					<td class="popup-table-th">类型</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.materialType : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">种类</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.type : ''}}</td>
					<td class="popup-table-th">港口</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.portName : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">船名</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.shipName : ''}}</td>
					<td class="popup-table-th">港口库存</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.portInventory : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">运费(元)</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.shipping : ''}}</td>
					<td class="popup-table-th">单价(元)</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.price : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">吨度价(元)</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.tonPrice : ''}}</td>
					<td class="popup-table-th">港口价(元)</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.portPrice : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">总金额不含税</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.totalAmountN : ''}}</td>
					<td class="popup-table-th">总金额含税</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.totalAmountY : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">Fe</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.Fe : ''}}</td>
					<td class="popup-table-th">SIO2</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.SiO2 : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">AL203</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.Al2O3 : ''}}</td>
					<td class="popup-table-th">P</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.P : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">H20</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.H2O : ''}}</td>
					<td class="popup-table-th">K2O</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.K2O : ''}}</td>
				</tr>
				<tr>
					<td class="popup-table-th">S</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.S : ''}}</td>
					<td class="popup-table-th">As</td>
					<td class="popup-table-td">{{selectedItem ? selectedItem.As : ''}}</td>
				</tr>
			</table>
		</u-popup>
	</view>
</template>

<script>
	import materialCell from './materialCell.vue'
	import materialFilterView from './materialFilterView.vue'
	export default {
		name: "socialResourceList",
		components: {
			materialFilterView,
			materialCell
		},
		props: {
			//当前选中的物料
			curMaterial: {
				type: Array,
				default () {
					return [];
				}
			},
		},
		data() {
			return {
				//当前选中的港口
				curPort: {},
				//物料数据list—用于table
				portMaterialList: [],
				//数据加载状态
				portMaterialStatus: 'loadmore',
				//物料数据总数量
				portMaterialTotal: 0,
				//物料数据当前页码
				portMaterialPage: 0,
				portMaterialPageSize: 10,
				loadType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				//采购决策详情pop页
				popupShow: false,
				selectedItem: null,
			};
		},
		created() {
			this.initData();
		},
		methods: {
			//获取初始化页面的数据
			initData() {
				this.requestMateriaList(0);
			},

			// 获取港口物料列表
			// portPkid:港口id,不传则返回默认港口的物料列表
			// keywords：模糊搜索关键字
			// baseMaterialPkid：基础物料id
			// currentPage: 请求页码
			requestMateriaList(currentPage, portPkid, baseMaterialPkid, keywords) {
				let params = {
					portPkid: portPkid ? portPkid : '',
					baseMaterialPkid: baseMaterialPkid ? baseMaterialPkid : '',
					keywords: keywords ? keywords : '',
					currentPage: currentPage,
					pageSize: this.portMaterialPageSize
				};
				this.$u.api.requestMateriaList(params).then(res => {
					let data = res;
					if (currentPage == 0) {
						this.portMaterialList = data.list;
						this.portMaterialTotal = data.pagination.total;
					} else {
						this.portMaterialList = this.portMaterialList.concat(data.list);
					}
					if (this.portMaterialList.length >= this.portMaterialTotal) {
						this.portMaterialStatus = 'nomore';
					} else {
						this.portMaterialStatus = 'loadmore';
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			//跳转到港口选择页面
			toPortSelect() {
				// 发送事件给父组件
				this.$emit('toPortSelect');
			},
			
			closePortPopup() {
				// 发送事件给父组件
				this.$emit('closePortPopup');
			},
			
			//切换港口
			changePort(newPort) {
				this.curPort = newPort;
				//重置数据
				this.portMaterialPage = 0;
				this.portMaterialList = [];
				this.portMaterialStatus = 'loadmore';
				this.portMaterialTotal = 0;
				this.requestMateriaList(0, this.curPort.pkid);
			},

			//选中物料类型
			changeMaterialType(e) {
				//重置数据
				this.portMaterialPage = 0;
				this.portMaterialList = [];
				this.portMaterialStatus = 'loadmore';
				this.portMaterialTotal = 0;
				this.requestMateriaList(0, this.curPort.pkid, e[1].pkid);
			},

			//列表item点击事件
			itemClick(e) {
				this.$emit('itemClick', e);
				this.popupShow = true;
				this.requestMaterialInfoByPkid(e.pkid);
			},
			
			//获取物料详情
			requestMaterialInfoByPkid(pkid) {
				this.$u.api.requestMaterialInfoByPkid(pkid).then(res => {
					this.selectedItem = res;
				}).catch(err => {
					console.log(err)
				})
			},

			loadMore() {
				if (this.portMaterialList.length >= this.portMaterialTotal) return;
				this.portMaterialStatus = 'loading';
				this.portMaterialPage = ++this.portMaterialPage;
				let baseMaterialPkid = this.curMaterial ? (this.curMaterial[1] ? this.curMaterial[1].material : '') : '';
				this.requestMateriaList(this.portMaterialPage, this.curPort.pkid, baseMaterialPkid);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filterView {
		margin-top: 13rpx;
	}

	.portMaterialList {
		padding: 0rpx 30rpx;
	}
	
	.popup-topView {
		height: 88rpx;
	}
	
	.popup-score {
		width: 34rpx;
		height: 34rpx;
		background: #1CBD7A;
		border-radius: 50%;
		float: left;
		margin: 29rpx 6rpx 0rpx 60rpx;
		font-size: 16rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: center;
	}
	
	.popup-title {
		float: left;
		position: absolute;
		width: 100%;
		font-size: 28rpx;
		line-height: 88rpx;
		text-align: center;
		color: #333333;
	}
	
	.popup-collect {
		float: right;
		width: 34rpx;
		height: 34rpx;
		margin-right: 52rpx;
		margin-top: 29rpx;
	}
	
	.popup-table {
		width: 540rpx;
		margin: 0rpx 20rpx 30rpx 20rpx;
		font-size: 20rpx;
		text-align: center;
		border-right: 1rpx solid #000000;
		border-bottom: 1rpx solid #000000;
	}
	
	.popup-table-th {
		background-color: #f2f2f2;
		width: 160rpx;
		height: 50rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}
	
	.popup-table-td {
		width: 110rpx;
		height: 50rpx;
		border-left: 1rpx solid #000000;
		border-top: 1rpx solid #000000;
	}
</style>
